@import '../bootstrap'

.chip
  align-items: center
  background: $chip-background
  border: $chip-border
  border-radius: $chip-border-radius
  cursor: default
  display: inline-flex
  justify-content: space-between
  font-size: $chip-font-size
  padding: $chip-padding
  margin: $chip-margin
  height: $chip-height
  transition: .3s $transition.ease-in-out
  vertical-align: middle
  white-space: nowrap
  color: $chip-label-color

  .avatar
    border-radius: 50%
    // Important is needed to account for new avatar structure
    height: $chip-height !important
    width: $chip-height !important
    min-width: $chip-height
    margin-left: -14px
    margin-right: 8px
    color: #fff

    img
      width: 100%
      height: 100%

  &:focus
    elevation(2)
    outline: none

  &--label
    border-radius: $chip-label-border-radius

  &--outline
    background: $chip-outline-background
    color: $chip-outline-color

  &--small
    height: $chip-small-height

    .avatar
      height: $chip-small-height
      width: $chip-small-height
      min-width: $chip-small-height

  &__close
    color: inherit
    display: flex
    align-items: center
    text-decoration: none
    font-size: $chip-icon-font-size
    margin-left: 4px
    margin-right: -2px
    transition: .3s $transition.ease-in-out

    &:hover
      opacity: .8

  &--removable
    padding: $chip-removeable-padding

  &--select-multi
    margin: $chip-margin $chip-margin $chip-margin 0

  .icon
    color: inherit
    opacity: .54

  .icon--right
    margin-left: 4px

  .icon--left
    margin-right: 4px
